<script setup>
	import {
		userRecord
	} from "@/api/user.js";
	import {
		computed,
		onMounted,
		ref
	} from "vue";
	import {
		delay
	} from "@/utils";
	// 定义参数值
	const loading = ref(false)
	const formData = ref({
		name: '',
		status: '',
	})
	// 几页 每页多少条
	const paginationData = ref({
		total: 0,
		pageSize: 15,
		page: 1,
	})
	// 接收数据的参数
	const projectlist = ref([]);
	const statusEnum = computed(() => STATUS_ENUM)
	const tableRowClassName = ({
		row,
		rowIndex
	}) => {
		if (row.is_jiaban ==1) {
		  // 后面的css样式
		  return 'warning-row';
		} 
		return row.className
	}
	// 定义搜索状态值
	const formDataT = ref({
		keyword: '',
		post: '',
		phone: '',
	})
	const tableHeight = ref(500)
	const contentRef = ref(null)
	// 高度
	function initHeight() {
		const element = contentRef.value
		if (!element) return
		const {
			height
		} = element.getBoundingClientRect()
		tableHeight.value = height
	}
	// 切换页面的时候调用
	function pageChange(val) {
		paginationData.value.page = val
		initData()
	}

	// 获取数据列表
	async function initData() {
		loading.value = true
		const {
			page
		} = paginationData.value
		const {
			name,
			status
		} = formData.value
		const payload = {
			page
		}
		if (!!name) {
			payload.keyword = name
		}
		if (status !== '') {
			payload.status = status
		}
		const resp = await userRecord(payload).catch(() => {
			loading.value = false
		});
		const {
			code,
			data
		} = resp;
		const {
			total,
			data: list
		} = data
		paginationData.value.total = total
		if (code !== 1) return loading.value = false;
		if (!!list && list.length) {
			const statusEnum = {
				'1': '',
				'2': 'success',
				'3': 'warning',
				'4': 'danger',
				'7': 'danger',
			}
			const tableColStatus = {
				'1': 'info-row',
				'2': 'success-row',
				'3': 'info-row',
				'4': 'danger-row',
				'7': 'danger-row',
				'6': 'primary-row'
			}
			await delay(300)
			projectlist.value = data.data.map(item => {
				const {
					status
				} = item
				item.tagType = statusEnum[status]
				item.className = tableColStatus[status]
				return item
			})
		}
		loading.value = false
	}
	onMounted(() => {
		initHeight()
		initData();
	});
</script>
<template>
	<div class="content relative flex column ">
		<div class="w-100">
			<el-row>
				<el-col>
					<el-form ref="formRef" :model="formDataT" inline>
						<el-form-item label="姓名" prop="keyword">
							<el-input type="text" v-model="formDataT.keyword" placeholder="请输入姓名" />
						</el-form-item>
						<el-form-item label="岗位" prop="post">
							<el-input type="text" v-model="formDataT.post" placeholder="请输入岗位" />
						</el-form-item>
						<el-form-item label="手机号" prop="phone">
							<el-input type="text" v-model="formDataT.phone" placeholder="请输入手机号" />
						</el-form-item>
						<el-form-item>
							<el-space>
								<el-button type="primary">搜索</el-button>
								<el-button type="danger">重置</el-button>
							</el-space>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<!-- is_jiaban 来判断是否标红这一行 -->
		
		<div class="relative w-100 flex-1">
			<div class="absolute inset " ref="contentRef">
				<el-table border  v-loading="loading" :data="projectlist" fit style="width: 100%" :height="tableHeight"
					:row-class-name="tableRowClassName">
					<el-table-column prop="nickname" label="姓名" />
					<el-table-column prop="mobile" label="手机号" />
					<el-table-column prop="date" label="日期"></el-table-column>
					<el-table-column prop="zaoshang_daka" label="早上打卡时间" />
					<el-table-column prop="wanshang_daka" label="晚上打卡时间" />
					<el-table-column prop="jiaban_text" label="是否加班" />
					<el-table-column prop="content" label="备注" />
				</el-table>
			</div>
		</div>
		<div class="page-footer">
			<el-pagination layout="prev, pager, next" :total="paginationData.total" :page-size="paginationData.pageSize"
				:current_page="paginationData.page" @current-change="pageChange" />
		</div>

	</div>
</template>

<style>
	.el-table .warning-row {
		background-color: #E6F5C7 !important; 
		--el-table-tr-bg-color: var(--el-color-warning-light-9);
	}

	.el-table .primary-row {
		--el-table-tr-bg-color: var(--el-color-primary-light-9);

	}

	.el-table .info-row {
		--el-table-tr-bg-color: var(--el-color-info-light-9);

	}

	.el-table .success-row {
		--el-table-tr-bg-color: var(--el-color-success-light-9);
	}

	.el-table .danger-row {
		--el-table-tr-bg-color: var(--el-color-danger-light-9);

	}
</style>
<style scoped lang="scss">

	
	.evenRow {
	  background: #0C385E !important;
	}
	.oddRow{
	  background:#062340 !important;
	}
	.content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: #fff;
		border-radius: 4px;
		overflow: hidden;
		position: relative;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
		padding: 16px 16px 0;

		.page-footer {
			padding: 16px;
			display: flex;
			justify-content: flex-end;
		}
	}

	.top_header {
		margin-bottom: 16px;
	}

	.page {
		float: right;
		margin-top: 30px;
	}
</style>